<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<title>宁土文vue任务计划</title>
	<link rel="stylesheet" type="text/css" href="index.css" />		
	<link rel="stylesheet" type="text/css" href="./lib/bootstrap/3.3.0/css/bootstrap.css"/>
</head>
<body >
   <div class="main container">
   	   <div class="row">
		<nav class="navbar navbar-default" role="navigation">
	    <div class="container-fluid">
	    <div class="navbar-header">
	        <button type="button" class="navbar-toggle" data-toggle="collapse"
	                data-target="#example-navbar-collapse">
	            <span class="sr-only">切换导航</span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	        </button>
	        <a class="navbar-brand" href="#all">宁土文任务计划列表</a>
	    </div>
	    <div class="collapse navbar-collapse" id="example-navbar-collapse">
	        <ul class="nav navbar-nav">
	        	<li class="active"><a href="#all">所有任务</a></li>
	            <li ><a href="#unfinished">未完成任务</a></li>
	            <li><a href="#finished">已完成任务</a></li>
	            
	        </ul>
	    </div>
	    </div>
	</nav>
</div>
	<div class="row">
			<p><strong>作业2:下拉选择</strong></p>
	</div>
	<div class="row"> 
		<div class="col-xs-12 col-md-6">
			<my-select v-bind:list="cityList"></my-select>
		</div>
	</div>
	<!-- <div class="row"> 
		<div class="col-xs-12 col-md-6">
			<div>
				<input type="text" class="form-control w200" />
				<ul class="select">
					<li class="select-item">北京</li>
					<li class="select-item">上海</li>
					<li class="select-item">广州</li>
					<li class="select-item">深圳</li>
				</ul>
			</div>
		</div>
	</div> -->
	<div class="row">
			<p><strong>作业1:任务列表</strong></p>
		</div>
	<div class="row">
			<span>添加任务：</span>
	</div>
	<div class="row">
		<input @keyup.enter="addTodo"
						   v-model="todo" placeholder="提示：按回车添加" class="form-control"  />
	</div>

	<br/>
	<br />
	<div class="row mt50">
		<span>任务列表：</span>
		<span v-show="list.length"> {{noCheckLength}}个未完成任务</span>
	 </div>

	 <div class="row">
		 <table class="table table-bordered">
		 	<thead>
			    <tr>			    	
			      <th class="text-center" width="15%">完成</th>
			      <th width="70%">任务</th>
			      <th class="text-center" width="15%">删除</th>
			    </tr>
			  </thead>
			  <tbody>
			    <tr :class="{ completed:item.isChecked,editing:item === editortodos}" v-for="item in filterList">
			      <td class="text-center">
			      	<input type="checkbox" name="" v-model="item.isChecked">
			      </td>
			      <td>
			      		<label v-if="editortodos !== item" v-on:dblclick="editorTodo(item)">{{ item.content }}</label>
			      		<input v-if="editortodos === item" 
			      				type="text" 
			      				class="form-control"
			      				name="" 
								v-model="item.content" 
								v-foucs="editortodos === item"
								@blur="editorTodoend(item)"
								@keyup.enter = "editorTodoend(item)"
								@keyup.esc = "cancelTodo(item)"
							/>
			      </td>
			      <td class="text-center">
			      		<button class="btn btn-primary" @click="removeTodo(item)">删除</button>
			      </td>
			    </tr>
			    <tr v-if="!list.length">
			    	<td colspan="3">
			    		<span v-show="!list.length">还未添加任何任务</span>
			    	</td>
			    </tr>
			  </tbody>
		 </table>
	</div>
</div>
	<script type="text/javascript" src="./lib/jquery/1.11/jquery.js"></script>
	<script type="text/javascript" src="./lib/bootstrap/3.3.0/js/bootstrap.js"></script>
	<script type="text/javascript" src="./lib/vue/2.2.6/vue.js"></script>
	<script type="text/javascript" src="index.js"></script>
</body>
</html>